App.require(["htmlTool"], function (htmlTool) {
    var app = App.getCurrent();

    app.defineLayer("str-radial-gradient", {
        render: function (next) {
            this.initProperty();
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        initProperty: function () {
            var property = this.property;
            var ratio = window.devicePixelRatio;
            property.id = property.id || this.uid;

            this.data.options = htmlTool.getOptions(this.slot);
            this.setGradient({
                id: property.id,
                type: "radial",
                sx: this.sx * ratio,
                sy: this.sy * ratio,
                sr: this.sr * ratio,
                fx: this.fx * ratio,
                fy: this.fy * ratio,
                fr: this.fr * ratio,
                options: this.data.options
            });
            this.data.attributeStr = this._createPropertyStr(property);
        },
        draw: function () {
            return true;
        },
        get sx() {
            return this.getValue("sx");
        },
        set sx(value) {
            if (this.setValue("sx", value)) {
                this.resetOption();
            }
        },
        get sy() {
            return this.getValue("sy");
        },
        set sy(value) {
            if (this.setValue("sy", value)) {
                this.resetOption();
            }
        },
        get sr() {
            return this.getValue("sr");
        },
        set sr(value) {
            if (this.setValue("sr", value)) {
                this.resetOption();
            }
        },
        get fx() {
            return this.getValue("fx");
        },
        set fx(value) {
            if (this.setValue("sy", value)) {
                this.resetOption();
            }
        },
        get fy() {
            return this.getValue("fy");
        },
        set fy(value) {
            if (this.setValue("fx", value)) {
                this.resetOption();
            }
        },
        get fr() {
            return this.getValue("fr");
        },
        set fr(value) {
            if (this.setValue("fr", value)) {
                this.resetOption();
            }
        },
        resetOption: function () {
            var property = this.property;
            var parentCanvas = this._getCanvas();
            var ratio = window.devicePixelRatio;
            var components = parentCanvas.getUseGradients(property.id);
            parentCanvas.resetRadialGradientById({
                id: property.id,
                fx:this.fx * ratio,
                fy:this.fy * ratio,
                fr:this.fr * ratio,
                sx:this.sx * ratio,
                sy:this.sy * ratio,
                sr:this.sr * ratio,
                options: this.data.options
            });
            if (components) {
                for (var i = 0; i < components.length; i++) components[i].data.isChange = true;
            }
        },
        removeOption: function (index) {
            this.data.options.slice(index, 1);
            this.resetOption();
        },
        changeOption: function (index, value, color) {
            var option = this.data.options[index];
            if (!option) return;
            option.value = value;
            option.color = color;
            this.resetOption();
        },
        appendOption: function (value, color) {
            this.data.options.push({ value: value, color: color });
            this.resetOption();
        }
    });
})